<template>
	<view>
		<view style="width: 100%;background-color: #fff;">
			<view class="search-box">
				<input type="text" placeholder-class="placeholder-style" placeholder="输入关键词搜索"
					v-model="formData.search_text" />
				<view class="del-btn" v-if="formData.search_text" @click="delSearch">
					<image src="@/static/images/delete.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="search-btn" @click="search">
					<image src="/static/images/search.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<uv-sticky bgColor="#fff">
			<uv-tabs :scrollable="false" :list="list" lineColor="#FE3052" :activeStyle="{
      color: '#000',
      fontSize: '32rpx',
      transform: 'scale(1.05)',
      backgroundImage: 'url(../../static/images/left_title.png), url(../../static/images/right_title.png)',
      backgroundRepeat: 'no-repeat, no-repeat',
      backgroundPosition: 'calc(50% - 20rpx) center, calc(50% + 30rpx) center',
      backgroundSize: '20rpx 20rpx, 20rpx 20rpx'
    }" :inactiveStyle="{'font-size':'32rpx'}" @click="selectClick"></uv-tabs>
		</uv-sticky>
		<block v-if="searchList.length>0">
			<!-- 瀑布流布局 -->
			<view style="padding: 30rpx;" v-if="formData.type==2">
				<FriendList :list="searchList" type="usermark"></FriendList>
			</view>
			<view style="padding: 30rpx;" v-if="formData.type==1">
				<ActiveList :list="searchList" ishome="home"></ActiveList>
			</view>
			<view class="user-list" v-if="formData.type==3">
				<view class="list-item" v-for="(item,index) in searchList" :key="item.id">
					<view class="avatar" @click="toUserPage(item.id)">
						<image v-if="item.avatar!=''" :src="baseurl+'/'+item.avatar" mode="aspectFill"></image>
						<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
					</view>
					<view class="user-info">
						<view class="nick">
							{{item.username=="微信用户"?'未知用户':item.username}}
						</view>
						<view class="id-number">
							ID：{{item.account}}
						</view>
					</view>
					<view class="gz-btn" v-if="item.relationship==0" @click="follower(0,item)">关注</view>
					<view class="gz-btn" v-if="item.relationship==1" @click="follower(0,item)">回关</view>
					<view class="ygz-btn" v-if="item.relationship==2" @click="follower(1,item)">已关注</view>
					<view class="ygz-btn" v-if="item.relationship==3" @click="follower(1,item)">互相关注</view>
				</view>
			</view>
		</block>
		<!-- 列表为空 -->
		<view style="margin-top: 100rpx;" v-if="searchList.length==0">
			<KongList title="暂无内容"></KongList>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		useActiveStore
	} from '@/store/modules/active.js'
	import ActiveList from '@/components/ActiveList.vue';
	import FriendList from '@/components/FriendList.vue';
	import KongList from '@/components/KongList.vue'
	const userstore = useUserStore()
	const activeStore = useActiveStore()
	const baseurl = ref('')
	const list = reactive([{
		name: '活动',
		id: 1
	}, {
		name: '找伴',
		id: 2
	}, {
		name: '用户',
		id: 3
	}])
	const formData = reactive({
		lat: '',
		lng: '',
		search_text: '',
		type: 2,
		page: 1,
		city_id: ''
	})
	const loadStatus = ref('loadmore')
	const searchList = ref([])
	const selectClick = (e) => {
		formData.type = e.id
		formData.page = 1
		searchList.value = []
		getSearchList()
	}
	onLoad(() => {
		baseurl.value = uni.getStorageSync('baseUrl')
		formData.page = 1
		getSearchList()
	})
	onReachBottom(() => {
		if (loadStatus.value == 'nomore') {
			return
		}
		formData.page++
		getSearchList()
	})
	// 获取搜索数据
	const getSearchList = async () => {
		formData.lat = uni.getStorageSync('latitude')
		formData.lng = uni.getStorageSync('longitude')
		formData.city_id = uni.getStorageSync('cityId')
		loadStatus.value = 'loading'
		let res = await activeStore.getSearchList(formData)
		if (res.code == 200 && res.data) {
			searchList.value = searchList.value.concat(res.data.data)
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
		} else {
			loadStatus.value = 'nomore'
		}
	}
	// 搜索
	const search = () => {
		searchList.value = []
		formData.page = 1
		getSearchList()
	}
	// 删除搜索
	const delSearch = () => {
		searchList.value = []
		formData.page = 1
		formData.search_text = ''
		getSearchList()
	}
	// 去用户主页
	const toUserPage = (userId) => {
		uni.navigateTo({
			url: '/pages/user/userpage/index?userId=' + userId
		})
	}
	// 关注or取关
	const follower = throttle(async (type, item) => {
		if (type == 0) {
			let res = await userstore.followOrClose({
				id: item.id,
				type: '0'
			})
			if (res.code == 200) {
				uni.$uv.toast('关注成功')
				if (item.relationship == 0) {
					item.relationship = 2
				}
				if (item.relationship == 1) {
					item.relationship = 3
				}
			}
		} else {
			let res = await userstore.followOrClose({
				id: item.id,
				type: '1'
			})
			if (res.code == 200) {
				uni.$uv.toast('取关成功')
				if (item.relationship == 2) {
					item.relationship = 0
				}
				if (item.relationship == 3) {
					item.relationship = 1
				}
			}
		}
	}, 200)
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		border: 4rpx solid #222;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 8rpx;
		// margin-top: 30rpx;
		width: 690rpx;
		margin: auto;

		input {
			flex: 1;
			margin-left: 36rpx;
			color: #999;
			font-size: 28rpx;
		}

		.del-btn {
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			// background-color: red;
		}

		.search-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96rpx;
			height: 64rpx;
			background: #222222;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			margin-left: 12rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	// 用户列表
	.user-list {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 16rpx;

		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 52rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				flex: 1;
				margin-left: 24rpx;

				.nick {
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
					padding-bottom: 8rpx;
				}

				.id-number {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}

			.gz-btn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #FE3052;
				border-radius: 32rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.ygz-btn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 32rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
</style>